<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卡片翻面效果</title>
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
    <style>
        .poly::before {
            clip-path: polygon(
                0% 0%,
                90% 0%,
                100% 70%
            );
        }
    </style>
</head>
<body>
    <h1 class="fixed top-[20px] font-bold text-[40px] left-[30%]">纯CSS实现的翻转卡片效果</h1>
    <ul class="flex mx-auto mt-25 w-fit gap-[60px]">
        <li class="test-1 w-[260px] h-[510px] relative group">
            <div class="test-1-1 absolute inset-0  backface-hidden group-hover:rotate-y-180 transition-all duration-600 flex flex-col">
                <div class="bg-[#91c6f9]">
                    <h3 class="text-[28px] text-white text-center pt-[30px]">百科校园</h3>
                    <p class="text-white text-[14px] text-center mb-[26px] mt-[6px]">最有温度的校园公益知识团队</p>
                    <button class="block text-[14px] text-[#565d64] bg-white w-[170px] h-[30px] mx-auto leading-[30px]">40万燃梦计划成员</button>
                    <button class="block text-[14px] text-[#565d64] bg-white w-[170px] h-[30px] mx-auto leading-[30px] mt-[10px]">1250万词条贡献</button>
                    <p class="text-[14px] text-white text-center mt-[60px] pb-[16px]">覆盖2430所高校</p>
                </div>
                <div class="box-border border-[#e2e2e2] border flex-1">
                    <div class="flex flex-col items-center mt-[20px] gap-[8px]">
                        <img src="/images/fd039245d688d43f87949de0004cc51b0ef41bd58ddd.png" class="block size-[110px] rounded-full"/>
                        <p class="flex items-center gap-[6px]">
                            污格格污
                            <em class="not-italic text-white bg-[#63b8ff] px-[10px] rounded-full h-[18px] leading-[18px] text-[14px]">PK</em>
                        </p>
                        <div class="absolute text-white text-[12px] size-[40px] flex flex-col items-center justify-center bg-[#91c6f9] translate-x-[-80px] before:absolute before:size-[20px] before:bg-[#91c6f9] before:bottom-[-16px] poly before:ml-[6px]">
                            <span>优秀</span>
                            <span>校园</span>
                        </div>
                    </div>
                    <div class="w-[200px] h-[30px] mx-auto border text-center text-[#666] border-[#e2e2e2] rounded-full leading-[30px] text-[14px] mt-[10px]">
                        词条2587|特色词条3
                    </div>

                </div>
            </div>
            <div class="test-1-2 absolute inset-0  backface-hidden rotate-y-180 group-hover:rotate-y-360 transition-all duration-600 flex flex-col">
                <div class="bg-[#91c6f9]">
                    <h3 class="text-white text-[16px] bg-[rgba(0,0,0,0.2)] w-[150px] h-[30px] text-center leading-[30px] mx-auto">百科校园</h3>
                    <ul class="grid grid-cols-3 grid-rows-3 gap-x-[14px] gap-y-[20px] w-fit mx-auto mt-[20px] pb-[26px]">
                        <li>
                            <img src="/images/fd039245d688d43f87949de0004cc51b0ef41bd58ddd.png" class="block size-[58px] rounded-full"/>
                        </li>
                        <li>
                            <img src="/images/a50f4bfbfbedab64034f3be56f64b8c379310a55b0ce.jfif" class="block size-[58px] rounded-full"/>
                        </li>
                        <li>
                            <img src="/images/0b46f21fbe096b63f624fe7594619044ebf81a4c06c1.jfif" class="block size-[58px] rounded-full"/>
                        </li>
                        <li>
                            <img src="/images/060828381f30e924b899c317d45a79061d950a7b59c0.jfif" class="block size-[58px] rounded-full"/>
                        </li>
                        <li>
                            <img src="/images/c8ea15ce36d3d539b60093e5a2d5fe50352ac65c1ac0.jfif" class="block size-[58px] rounded-full"/>
                        </li>
                        <li>
                            <img src="/images/48540923dd54564e9258231f2b8c8b82d158ccbfe1c0.jfif" class="block size-[58px] rounded-full"/>
                        </li>
                        <li>
                            <img src="/images/e7cd7b899e510fb30f2477b04161df95d143ad4ba6c0.jfif" class="block size-[58px] rounded-full"/>
                        </li>
                        <li>
                            <img src="/images/f2deb48f8c5494eef01fd93cb5a7f7fe9925bc31d0c1.jfif" class="block size-[58px] rounded-full"/>
                        </li>
                        <li>
                            <img src="/images/5366d0160924ab18972bfa11ada8f1cd7b899e519dc1.jfif" class="block size-[58px] rounded-full"/>
                        </li>
                    </ul>
                </div>
                <div class="flex-1 flex flex-col items-center box-border border-[#e2e2e2] border">
                    <div class="group/item flex items-center gap-[10px] mt-[20px]">
                        <img src="/images/fd039245d688d43f87949de0004cc51b0ef41bd58ddd.png" class="block size-[60px] rounded-full"/>
                        <div>
                            <h3 class=" group-hover/item:text-[#1b6ef3]">污格格污</h3>
                            <p class="text-[14px] text-[#888] group-hover/item:text-[#1b6ef3] mt-[3px]">编辑的特色词条</p>
                        </div>
                    </div>
                    <ul class="text-[14px] text-[#666] w-[80%] mx-auto mt-[10px] flex flex-wrap gap-x-[6px] gap-y-[12px] h-[80px] content-start">
                        <li class="border-[#ccc] border px-[8px]">机械职业教育</li>
                        <li class="border-[#ccc] border px-[8px]">河北科技大学学报</li>
                    </ul>
                    <button class="w-[80%] bg-[#5ba5ff] h-[28px] leading-[28px] rounded-full text-white">PK对决</button>
                </div>
            </div>
        </li>
        <li class="test-2 w-[260px] h-[510px] relative group">
            <div class="test-2-1 absolute inset-0  backface-hidden group-hover:rotate-y-180 transition-all duration-600 flex flex-col">
                <div class="bg-[#74d290]">
                    <h3 class="text-[28px] text-white text-center pt-[30px]">百科蝌蚪团</h3>
                    <p class="text-white text-[14px] text-center mb-[26px] mt-[6px]">最核心的优秀词条贡献团队</p>
                    <button class="block text-[14px] text-[#565d64] bg-white w-[170px] h-[30px] mx-auto leading-[30px]">精英 协作 分享</button>
                    <button class="block text-[14px] text-[#565d64] bg-white w-[170px] h-[30px] mx-auto leading-[30px] mt-[10px]">精心编写22万特色词条</button>
                    <p class="text-[14px] text-white text-center mt-[60px] pb-[16px]">共471个蝌蚪</p>
                </div>
                <div class="box-border border-[#e2e2e2] border flex-1">
                    <div class="flex flex-col items-center mt-[20px] gap-[8px]">
                        <img src="/images/faedab64034f78f0f736e9c5ee6b1d55b319ebc4b6c9.jfif" class="block size-[110px] rounded-full"/>
                        <p class="flex items-center gap-[6px]">
                            椿兮如霖
                            <em class="not-italic text-white bg-[#63b8ff] px-[10px] rounded-full h-[18px] leading-[18px] text-[14px]">PK</em>
                        </p>
                        <div class="absolute text-white text-[12px] size-[40px] flex flex-col items-center justify-center bg-[#74d290] translate-x-[-80px] before:absolute before:size-[20px] before:bottom-[-16px] poly before:bg-[#74d290] before:ml-[6px]">
                            <span>优秀</span>
                            <span>蝌蚪</span>
                        </div>
                    </div>
                    <div class="w-[200px] h-[30px] mx-auto border text-center text-[#666] border-[#e2e2e2] rounded-full leading-[30px] text-[14px] mt-[10px]">
                        词条88980|特色词条11990
                    </div>
                </div>
            </div>
            <div class="test-2-2 absolute inset-0  backface-hidden rotate-y-180 group-hover:rotate-y-360 transition-all duration-600 flex flex-col">
                <div class="bg-[#74d290]">
                    <h3 class="text-white text-[16px] bg-[rgba(0,0,0,0.2)] w-[150px] h-[30px] text-center leading-[30px] mx-auto">百科蝌蚪团</h3>
                    <ul class="grid grid-cols-3 grid-rows-3 gap-x-[14px] gap-y-[20px] w-fit mx-auto mt-[20px] pb-[26px]">
                        <li>
                            <img src="/images/faedab64034f78f0f736e9c5ee6b1d55b319ebc4b6c9.jfif" class="block size-[58px] rounded-full"/>
                        </li>
                        <li>
                            <img src="/images/d009b3de9c82d158ccbfd8b65b500ed8bc3eb135e43b.jfif" class="block size-[58px] rounded-full"/>
                        </li>
                        <li>
                            <img src="/images/1e30e924b899a9014c087e31e9cf1d7b02087bf45f3b.jfif" class="block size-[58px] rounded-full"/>
                        </li>
                        <li>
                            <img src="/images/8b13632762d0f703918f80dbfca0463d269759ee6f3b.jfif" class="block size-[58px] rounded-full"/>
                        </li>
                        <li>
                            <img src="/images/8435e5dde71190ef76c64cd348418a16fdfaaf51ca3e.jfif" class="block size-[58px] rounded-full"/>
                        </li>
                        <li>
                            <img src="/images/a6efce1b9d16fdfaaf5171e640d59b5494eef01fcd3a.jfif" class="block size-[58px] rounded-full"/>
                        </li>
                        <li>
                            <img src="/images/18d8bc3eb13533fa828b04265c89ea1f4134970aed3a.jfif" class="block size-[58px] rounded-full"/>
                        </li>
                        <li>
                            <img src="/images/4034970a304e251f95ca69d141dcde177f3e6709f5dd.jfif" class="block size-[58px] rounded-full"/>
                        </li>
                        <li>
                            <img src="/images/c83d70cf3bc79f3df8dc65384efbda11728b4710833a.jfif" class="block size-[58px] rounded-full"/>
                        </li>
                    </ul>
                </div>
                <div class="flex-1 flex flex-col items-center box-border border-[#e2e2e2] border">
                    <div class="group/item flex items-center gap-[10px] mt-[20px]">
                        <img src="/images/faedab64034f78f0f736e9c5ee6b1d55b319ebc4b6c9.jfif" class="block size-[60px] rounded-full"/>
                        <div>
                            <h3 class=" group-hover/item:text-[#1b6ef3]">椿兮如霖</h3>
                            <p class="text-[14px] text-[#888] group-hover/item:text-[#1b6ef3] mt-[3px]">编辑的特色词条</p>
                        </div>
                    </div>
                    <ul class="text-[14px] text-[#666] w-[80%] mx-auto mt-[10px] flex flex-wrap gap-x-[6px] gap-y-[12px] h-[80px] content-start">
                        <li class="border-[#ccc] border px-[8px]">三索锦蛇</li>
                        <li class="border-[#ccc] border px-[8px]">大牙士天牛</li>
                        <li class="border-[#ccc] border px-[8px]">观音绿荔枝</li>
                        <li class="border-[#ccc] border px-[8px]">我会好好的</li>
                    </ul>
                    <button class="w-[80%] bg-[#5ba5ff] h-[28px] leading-[28px] rounded-full text-white">PK对决</button>
                </div>
            </div>
        </li>
    </ul>
</body>
</html>